<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
				
			}
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
				margin:0 auto;
			}
			.controlBox{
				width:500px;
				height:100px;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				border-top:1px solid red;
				align-items: center;
			}
		</style>
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				var cavBox = document.getElementById("cav");
				var ocav = cavBox.getContext('2d');
				var inputs = document.getElementsByTagName('input');
				var disX=0;
				var disY=0;
				var lineWidth = 1;//画笔粗细
				var color = 'black';//画笔颜色
				cavBox.onmousedown = function(ev){
					var ev = window.event || ev;
					//获得鼠标点击时 x轴坐标
					var startX = ev.clientX - oBox.offsetLeft;
					//获得鼠标点击时 y轴坐标
					var startY = ev.clientY - oBox.offsetTop;
					console.log(inputs[0].value);
					ocav.beginPath();
					//设置画笔粗细
					ocav.lineWidth = inputs[0].value;
					//将笔移到起点
					ocav.moveTo(startX,startY);
					document.onmousemove = function(ev){

						var ev = window.event || ev;
//						获取移动中的 画笔x坐标
						var x = ev.clientX - oBox.offsetLeft;
//						获取移动中的画笔y轴坐标
						var y = ev.clientY - oBox.offsetTop;
//						画笔描绘路径到目标点
						ocav.lineTo(x,y);
//						画线
						ocav.stroke();
					}
					document.onmouseup = function(){
						document.onmousemove = document.onmouseup =null;
					}
				}
				var flag = true;
				inputs[1].onclick = function(){
					if(flag){
						ocav.strokeStyle = 'white';
					}else{
						ocav.strokeStyle = color;
					}
					flag = !flag;
					
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="400"></canvas>
			<div class="controlBox">
				<div>画笔粗细：<input type="number" max="10" value="1" id="" /></div>
				<div><input type="button" value="橡皮"/></div>
				<div><input type="button" value="一键清除" /></div>
			
				<div>画笔颜色：<input type="color" name="" id="" /></div>
			
			</div>
			
			
			
		</div>
	</body>
</html>
